<template>
	<view class="userLogin">
		<!-- 头部顶部 -->
		<view class="ul-top">

		</view>
		<!-- 头部 -->
		<view class="ul-header">
			<text class="iconfont" @click="navBack">&#xe628;</text>
		</view>
		<!-- title -->
		<view class="ul-title">
			手机号登录
		</view>
		<view class="login-box">
			<!-- 输入信息 -->
			<view class="ul-message">
				<!-- <text class="ms-phone">请输入手机号</text> -->
				<input type="number" :focus="focusShow" placeholder="请输入手机号" @input="onInputPhone" v-model="phoneText" maxlength="11" />
				<image v-show="showClear" @click="clearPhhone()" src="/static/imgs/public/wrong.png" mode=""></image>
			</view>
			<!-- 输入验证码 -->
			<view class="input-ver">
				<input type="number" placeholder="请输入验证码" @input="onInput" v-model="verCode" maxlength="6" />
				<button :class="['authCode',{disableCode: buttonFlag},{disableCodeWait: buttonWait}]" @tap="getVerCode()" :disabled="buttonFlag">{{verCodeText}}</button>
			</view>
			<!-- 立即登录 -->
			<button :class="['rightAway',{sourceRightAway: loginFlag}]" :disabled="!loginFlag" @tap="onRightAway()">立刻登录</button>
		</view>
		
		<!-- 其它登录方式 -->
		<view class="other-login">
			其它方式登录
			<text class="iconfont">&#xe718;</text>
		</view>
		<view class="other-icon" @tap="otherLogin">
			<image src="/static/imgs/weixin.png" mode="aspectFill" ></image>
			<image src="/static/imgs/weibo.png" mode="aspectFill"></image>
			<image src="/static/imgs/qq.png" mode="aspectFill"></image>
			<image src="/static/imgs/zhifubao.png" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				phoneText: '',
				verCode: '',
				verCodeText: '获取验证码',
				buttonFlag: false,
				buttonWait:false,
				loginFlag: false,
				showClear:false,
				focusShow:false,
			};
		},
		computed: {
			...mapState(['isLogin'])
		},
		methods: {
			...mapMutations(['changeLogin', 'changeUserInfo']),
			onInputPhone(e) {
				if(e.detail.value !=''){
					this.showClear = true
					this.buttonWait = true;
				}else{
					this.showClear = false
					this.buttonWait = false;
				}
			},
			onInput() {
				this.$nextTick(() => {
					console.log(this.phoneText)
					console.log(this.verCode)
					if ((/^1[34578]\d{9}$/.test(this.phoneText)) && this.verCode.length == 6) {
						this.loginFlag = true;
					} else {
						this.loginFlag = false;
					}
				})
			},
			otherLogin() {
				uni.showToast({
					title: '暂未开放',
					icon: 'none'
				})
			},
			clearPhhone(){
				this.phoneText = ''
				this.showClear = false
				this.focusShow = true
				this.buttonWait = false;
			},
			// 微信登录
			weixinLogin() {
				uni.login({
					provider: 'weixin',
					success: res => {
						
						uni.getUserInfo({
							provider: "weixin",
							success(info) {
								console.log(info)
								// 获取用户
							}
						})
					},
					fail: () => {
						console.log("打印fail")
					},
					complete: () => {
						console.log("打印complete")
					}
				});
			},
			async onRightAway() { // 立即登录
				let res = await this.$http.login({
					phoneNumber: this.phoneText,
					code: this.verCode
				});
				if(res.code == 200){
					uni.showToast({
						title: '已登录',
						icon: 'none'
					});
					// 把用户信息保存到缓存中
					uni.setStorageSync('lph-user-info', {
						shavatar: res.data.shavatar,
						nickname: res.data.nickname,
						mobile: res.data.mobile,
						userid: res.data.userid,
						user_type: res.data.user_type,
						role_refresh_token: res.data.role_refresh_token,
						shid: res.data.shid
					});
					uni.setStorageSync('lph-token', res.data.role_request_token);
					
					setTimeout(() => {
						uni.navigateBack()
					}, 500);
				} else{
					uni.showToast({
						title: '请重试',
						icon: 'none'
					})
				}
				// return
			
			},
			async getVerCode() { // 获取验证码
				let intervalTime = 60;		
				// 判断手机号是否合法
				if (!(/^1[34578]\d{9}$/.test(this.phoneText))) {
					uni.showToast({
						title: '手机号不正确',
						icon: 'none'
					});
				} else {
					let a = await this.$http.sendSms({
						phoneNumber: this.phoneText
					});
					if (a.code == 200) {
						uni.showToast({
							title: '获取验证码成功',
							icon: 'none'
						});
						this.buttonFlag = true;
						let intervalId = setInterval(() => {
							intervalTime--;
							this.verCodeText = `(${intervalTime}s)`
							if (intervalTime <= 0) {
								clearInterval(intervalId);
								this.verCodeText = "获取验证码";
								this.buttonFlag = false;
							}
						}, 1000)
						return
					};
					
					uni.showToast({
						title: a.message,
						icon: 'none'
					})

				}
			},
			navBack() {
				uni.navigateBack()
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "static/css/userLogin.scss"
</style>
